icon_home

04_1단, 2단, 3단 레이아웃


1단 레이아웃

header

웹페이지의 상단 영역으로 로고, 내비게이션, 검색, 로그인/회원가입, 마이페이지, 언어설정, 장바구니, 모바일 토글 버튼 등

main

main 영역은 콘텐츠 영역으로서 웹페이지의 다양한 콘텐츠 내용이 들어가며 section, article, aside 태그로 작성

section

section태그는 독립적인 콘텐츠들을 묶고자 할 때 사용하며, 제목요소 h2~h6태그를 작성해야 함
제목이 없을 시 html마크업 검사시 경고창이 뜸

article

article태그는 section태그 안에서 또는 밖에서 독립적인 내용을 작성하고자 할 때 사용하며, section태그처럼 제목요소 h2~h6태그가 나와야 마크업 검사시 요류가 발생하지 않음

article

article태그는 section 태그 밖에서도 사용이 가능하다.(section과 무관한 내용일 경우)

footer

웹페이지의 하단영역으로서 하단로고, 회사소개, 이용약관, 개인정보처리방침, 회사주소, 연락처, 대표자명, 사업자번호, 통신판매업신고번호, 관리자 이메일, 카피라이트 등의 정보가 들어간다.

address

주소는 adress태그를 사용하여 작성하며 글자가 기울임으로 표시되지만 css에서 font-style:normal;로 보통글자로 표시해준다.
2단 레이아웃

header

section

첫 번째 article

두 번째 article

세번째 article

footer

3단 레이아웃

header

display: flex; 속성으로 가로배치

flex-direction: row-reverse; 로 가로배치된 요소 반대로 뒤집기

article

1단 왼쪽

article

2단 가운데

article

3단 오른쪽